Опис HTML тега <IMG>:

Тег <IMG> призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG або PNG. Цей тег має єдиний обов'язковий параметр src, який визначає адресу файлу з картинкою. Якщо необхідно, то малюнок можна зробити посиланням на інший файл, помістивши тег <IMG> в контейнер <A>. При цьому навколо зображення відображається рамка, яку можна прибрати, додавши параметр border = "0" в тег <IMG>. Малюнки також можуть застосовуватися в якості карт-зображень, коли картинка містить активні області, що виступають в якості посилання. Така картка за зовнішнім виглядом нічим не відрізняється від звичайного зображення, але при цьому воно може бути розбите на невидимі зони різної форми, де кожна з областей служить посиланням.

Синтаксис HTML тега <IMG>:

Параметри HTML тега <IMG>:

ALIGN - Для зображень та тексту можна вказувати їх положення щодо тексту або інших зображень на веб-сторінці. Спосіб вирівнювання задається параметром align тега. align='bottom | left | middle | right | top'

ALT - Параметр alt встановлює альтернативний текст для області зображення. Такий текст відображається у вигляді спливаючої підказки при наведенні курсору миші на область. Не всі браузери підтримують параметр alt.

BORDER - Об'єкт, який розміщений на веб-сторінку, можна помістити в рамку різної ширини. Для цього служить параметр border. За замовчуванням рамка навколо не відображається за винятком випадку, коли малюнок є посиланням. При цьому колір рамки збігається з кольором посилань, заданих за допомогою стилю або параметра link тега <BODY>.

HEIGHT - Для зміни розмірів зображення засобами HTML передбачені параметри height і width. Допускається використовувати значення в пікселах або відсотках. Якщо встановлена процентна запис, то розміри зображення обчислюються щодо батьківського елементу - контейнера, де знаходиться тег <IMG>. У разі відсутності батьківського контейнера, в його якості виступає вікно браузера. Іншими словами, width = "100%" означає, що малюнок буде розтягнуто на всю ширину веб-сторінки. Додавання тільки одного параметра width або height зберігає пропорції і відношення сторін зображення. Браузер при цьому очікує повного завантаження малюнка, щоб визначити його первинну висоту і ширину. Обов'язково задавайте розміри всіх зображень на веб-сторінці. Це дещо прискорює завантаження сторінки, оскільки браузеру немає потреби обчислювати розмір кожного малюнка після його отримання. Це твердження особливо важливо для зображень, розміщених усередині таблиці. Ширину і висоту зображення можна змінювати як в меншу, так і більшу сторону. Проте на швидкість завантаження малюнка це ніяк не впливає, оскільки розмір файлу залишається незмінним. Тому з обережністю зменшуйте зображення, тому що це може викликати здивування у читачів, чому такий маленький малюнок так довго вантажиться. А ось збільшення розмірів призводить до зворотного ефекту - розмір зображення великий, але файл щодо зображення аналогічного розміру завантажується швидше. Але якість малюнка при цьому погіршується.

HSPACE - Для будь-якого зображення можна задати невидимі відступи по горизонталі й вертикалі за допомогою параметрів hspace і vspace. Особливо це актуально при обтіканні малюнка текстом. У цьому випадку, щоб текст не «наїжджав» щільно на зображення, необхідно навколо нього додати порожній простір.

ISMAP - Параметр ismap говорить браузеру що малюнок є серверною картою-зображенням. Карти-зображення дозволяють прив'язувати посилання до різних областей одного зображення. Реалізується в двох різних варіантах - серверному і клієнтському. У разі застосування серверного варіанту браузер посилає запит на сервер для отримання адреси обраного посилання і чекає відповіді з необхідною інформацією. Такий підхід вимагає додаткового часу на очікування результату і окремі файли для кожної карти-зображення. Надсилання даних на сервер відбувається наступним чином. Необхідно помістити тег <IMG> в контейнер <A>, де в якості значення параметра href вказати адресу CGI-програми. Програма аналізує отримані координати натискання миші, які рахуються від лівого верхнього кута зображення, і повертає потрібної веб-сторінку.

SRC - Шлях до файлу, який буде на веб-сторінці. Список допустимих типів файлів залежить від браузера і його налаштувань, але популярні формати підтримується браузером без встановлення додаткових плагінів.

VSPACE - Для будь-якого зображення можна задати невидимі відступи по горизонталі й вертикалі за допомогою параметрів hspace і vspace. Особливо це актуально при обтіканні малюнка текстом. У цьому випадку, щоб текст не «наїжджав» щільно на зображення, необхідно навколо нього додати порожній простір.

WIDTH - Для зміни розмірів засобами HTML передбачені параметри height і width. Допускається використовувати значення в пікселах або відсотках. Якщо встановлена процентна запис, то розміри зображення обчислюються щодо батьківського елементу - контейнера, де знаходиться тег <IMG>. У разі відсутності батьківського контейнера, в його якості виступає вікно браузера. Іншими словами, width = "100%" означає, що малюнок буде розтягнуто на всю ширину веб-сторінки. Додавання тільки одного параметра width або height зберігає пропорції і відношення сторін зображення. Браузер при цьому очікує повного завантаження малюнка, щоб визначити його первинну висоту і ширину. Обов'язково задавайте розміри всіх зображень на веб-сторінці. Це дещо прискорює завантаження сторінки, оскільки браузеру немає потреби обчислювати розмір кожного малюнка після його отримання. Це твердження особливо важливо для зображень, розміщених усередині таблиці. Ширину і висоту зображення можна змінювати як в меншу, так і велику сторону. Проте на швидкість завантаження малюнка це ніяк не впливає, оскільки розмір файлу залишається незмінним. Тому з обережністю зменшуйте зображення, тому що це може викликати здивування у читачів, чому такий маленький малюнок так довго вантажиться. А ось збільшення розмірів призводить до зворотного ефекту - розмір зображення великий, але файл щодо зображення аналогічного розміру завантажується швидше. Але якість малюнка при цьому погіршується.

Закриваючий тег:

не обов'язковий

Додаткові відомості HTML тега <IMG>:

HTML: 3.2 4 XHTML: 1.0 1.1